<script setup lang="ts">
import { Icon } from '@iconify/vue'
import useHistoryStore from '@/store/modules/history'

const hisStore = useHistoryStore()
const appWindow = useWindow()
const dataList = ref([])
const total = ref(0)
const pageForm = ref({
  page: 1,
  page_size: 10,

})
function convData(data: any) {
  const date = new Date(data)
  return date.toLocaleString()
}
function flushList(data: {
  page: number
  page_size: number
}) {
  hisStore.getAllHistory(data).then(() => {
    dataList.value = hisStore.list
    total.value = hisStore.total
  },
  )
}
onMounted(() => {
  flushList(pageForm.value)
})

function details(info: any) {
  appWindow.add({ title: '识别记录详细信息', name: 'HistoryDetail', params: { info } })
}
function handleSizeChange(val: number) {
  pageForm.value.page_size = val
  flushList(pageForm.value)
}
function handleCurrentChange(val: number) {
  pageForm.value.page = val
  flushList(pageForm.value)
}
</script>

<template>
  <div class="absolute-container">
    <PageMain>
      <ElTable :data="dataList" stripe highlight-current-row border height="100%">
        <ElTableColumn width="110" label="识别图片">
          <template #header>
            <span>
              <Icon icon="icon-park:image-files" />
              识别图片
            </span>
          </template>
          <template #default="scope">
            <ImagePreview :src="scope.row.ImageURL" style="width: 100px;height: 100px;" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="ResultType" label="种类" width="80">
          <template #header>
            <span>
              <Icon icon="icon-park:rabbit" />
              种类
            </span>
          </template>
          <template #default="scope">
            <el-tag type="danger">
              {{ scope.row.ResultType }}
            </el-tag>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="Result" label="其他参数" width="200">
          <template #header>
            <span>
              <Icon icon="icon-park:info" />
              其他参数
            </span>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="AlgorithmUsed" label="识别算法" width="100">
          <template #header>
            <span>
              <Icon icon="icon-park:cpu" />
              识别算法
            </span>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="CreateTime" label="识别日期" width="200">
          <template #header>
            <span>
              <Icon icon="icon-park:calendar" />
              识别日期
            </span>
          </template>
          <template #default="scope">
            {{ convData(scope.row.CreateTime) }}
          </template>
        </ElTableColumn>
        <el-table-column fixed="right">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click.prevent="details(scope.row)"
            >
              详细信息
            </el-button>
          </template>
        </el-table-column>
      </ElTable>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageForm.page_size"
        :current-page="pageForm.page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </PageMain>
  </div>
</template>

<style lang="scss" scoped>
.absolute-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  // 让 page-main 的高度自适应
  .page-main {
    flex: 1;
    overflow: auto;

    :deep(.main-container) {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: auto;
    }
  }
}

.page-header {
  margin-bottom: 0;
}
</style>
